<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>常用工具</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="content-title">
                <!-- <img src="./../../assets/images/title_icon1.png" />常用工具 -->
                <div class="content-title-btn-box">
                    <el-button type="primary" @click="addFn">添加</el-button>
                    <el-button type="primary" @click="deleteList">批量删除</el-button>
                </div>
            </div>
            <div class="common-tool-table">
                <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="100">
                    </el-table-column>
                    <el-table-column prop="toolsTitle" label="标题">
                    </el-table-column>
                    <el-table-column prop="toolsName" label="名称">
                    </el-table-column>
                    <el-table-column prop="toolsContent" label="介绍">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <router-link :to="{ path: '/teacher/commonToolDetail', query: { toolId: scope.row.id }}">
                                <el-button type="text" size="small">查看</el-button>
                            </router-link>
                            <router-link to="">
                            <!-- <a href="javascript:void(0);"> -->
                                 <el-button type="text"  size="small" @click="editFn(scope.row.id,scope.row.toolsTitle,scope.row.toolsName,scope.row.toolsContent)">编辑</el-button>
                            <!-- </a> -->
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="tableData.length>0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                    <el-form-item label="标题 :" prop="title">
                        <el-input type="text" v-model="form.title" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="名称 :" prop="name">
                        <el-input type="text" v-model="form.name" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍 :" prop="introduction">
                        <el-input type="textarea" v-model="form.introduction" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                dialogFormVisible: false,
                dialogTitle: '',
                form: {
                    title: '',
                    name: '',
                    introduction: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
					],
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
					],
					introduction: [
                        { required: true, message: '请输入案例简介', trigger: 'blur' }
                    ]
                },
                //添加或编辑1：添加2：编辑
                addOrEdit: '',
                editId: ''
            }
        },
        created () {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/basis/functions/tools/ts/commonToolsList?pageNum='+self.currentPage+'&pageSize='+self.pagesize).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.page.list
                        self.totalCount = res.data.page.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
				this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //关闭弹窗
            closeDialog(){
                this.$refs.form.resetFields()
            },
            //添加
            addFn(){
                this.addOrEdit = 1
                this.dialogTitle = '添加常用工具'
                this.form = {
                    title: '',
                    name: '',
                    introduction: ''
                }
                this.dialogFormVisible = true
            },
            //删除选中
			deleteList() {
				let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的項目',
                        type: 'warning'
                    })
					return
                }
                let idList = ''
				for(let item in self.multipleSelection){
					if(item == 0){
						idList = self.multipleSelection[item]
					}else{
						idList = idList + '&' + 'idList='+self.multipleSelection[item]
                    }
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.get('/dataplatform/basis/functions/tools/t/delCommonTools?idList='+idList+'').then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				});
            },
            //编辑弹窗
            editFn (id,toolsTitle,toolsName,toolsContent) {
                this.addOrEdit = 2
                this.dialogTitle = '编辑'
                this.editId = id
                this.form = {
                    title: toolsTitle,
                    name: toolsName,
                    introduction: toolsContent
                }
                this.dialogFormVisible = true
            },
            //编辑表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url, data = {}

                        if(self.addOrEdit == 1){
                            url = '/dataplatform/basis/functions/tools/t/addCommonTools'
                            data = {
                                toolsTitle: self.form.title,
                                toolsName: self.form.name,
                                toolsContent: self.form.introduction
                            }
                        }else{
                            url = '/dataplatform/basis/functions/tools/t/saveCommonTools'
                            data = {
                                id: self.editId,
                                toolsTitle: self.form.title,
                                toolsName: self.form.name,
                                toolsContent: self.form.introduction
                            }
                        }
                        self.$http.post(url,data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(self.addOrEdit == 1){
                                    self.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })
                                    self.$refs[formName].resetFields()
                                }else{
                                    self.$message({
                                        message: '编辑成功',
                                        type: 'success'
                                    })
                                }
                                self.dialogFormVisible = false
                                self.init()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            }
        }
    }
</script>
